<template>
  <div id="container"></div>
</template>

<script>
import { loadMicroApp } from "qiankun";
import { microList } from "../singleSpa.js";

export default {
  data() {
    return {
      microApps: {}
    };
  },
  watch: {
    "$route.path": "loadApp"
  },
  activated() {
    console.log("activated");
    this.loadApp();
  },
  beforeDestroy() {
    Object.values(this.microApps).forEach(mic => {
      mic.unmount();
    });
  },
  methods: {
    loadApp() {
      const conf = microList.find(micro => micro.activeRule(location));
      if (!conf) return;

      if (this.microApps[conf.name]) {
        return;
      }

      const app = loadMicroApp(conf);
      this.microApps[conf.name] = app;
    }
  }
};
</script>
